<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="liu">
<button id="btn">修改</button>
<script>
    //? _name表示私有变量 用name也能访问到
    //? 创建数据模型对象
    const dataModel = {
        name: ''
    };
    //? 获取表单元素
    const inputElement = document.getElementById('liu');
    //? 监听输入事件 双向之一
    inputElement.addEventListener('input', (event) => {
        // console.log(event.target.value)
        //? 将输入的值更新到数据模型中的属性
        dataModel.name = event.target.value;
        console.log('input -> data',dataModel.name)
    });
    //? 监听数据模型属性的变化
    /*
    ? 当我们使用 Object.defineProperty 定义属性时，我们需要提供一个唯一的属性名作为第一个参数。
    ? 如果我们直接使用 name 作为属性名，会导致与已有的公开属性 name 产生冲突，从而引发错误。
    ? 为了避免这种冲突，我们选择使用 _name 作为私有属性的名称，以确保在定义属性时不会与其他已有的属性名冲突。
     */
    //? 双向之二
    Object.defineProperty(dataModel, 'name', {
        get: function() {
            //? 这里直接访问name会无限循环
            console.log('_name data->input',this._name)
            return this._name;
        },
        set: function(value) {
            if (value !== this._name) {
                this._name = value;
                //? 更新绑定的表单元素的值
                inputElement.value = value;
            }

        }
    });
</script>
</body>
</html>
